<template>
	<view class="content goods-content">
		<TopVue />
		<view class="goods-main">
			<view class="goods-left">
				<view class="goods-type goods-type-active">健康产品</view>
				<view class="goods-type">医疗器械</view>
			</view>
			<view class="goods-right">
				<view class="type-title">健康产品</view>
				<view class="goods-list-panel">
					<view class="goods-list" v-for="item in 10" @click="jump('/pages/index/goodsDetail')">
						<view class="goods-img-box">
							<image class="goods-img" src="/static/qrcode.png" mode="aspectFill"></image>
						</view>
						
						<view class="goods-info">
							<view class="goods-title no-warp">姜醒植物饮料</view>
							<view class="goods-price">¥ 20.00</view>
							<view class="goods-sell">已售100+</view>
							<view class="goods-buy">
								<text class="iconfont">&#xe711;</text>
								<input class="buy-number" value="0"/>
								<text class="iconfont">&#xe607;</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="iconfont">&#xe646;</view>
			<view class="play-info">
				<view class="play-tips">应付:</view>
				<view>
					<text class="play-num">¥ 20.00</text>
					<text class="play-count">（1件）</text>
				</view>
				
			</view>
			<view class="bottom-btn">立即支付</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import TopVue from '@/components/top.vue'
	const jump = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
	.goods-content {
		.goods-main {
			min-height: calc(100vh - 70rpx);
			background-color: #F6F6F6;
			display: flex;
			padding-bottom: 120rpx;
		}
		.goods-left{
			display: inline-block;
			vertical-align: top;
			
		}
		.goods-right{
			display: inline-block;
			padding: 0 15rpx;
			border-left: solid 1px #EDEDED;
			height: 100%;
		}
		
		.goods-type{
			height: 66rpx;
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: solid 1px #ddd;
			background: #EDEDED;
			font-weight: 500;
			font-size: 24rpx;
			color: #1E1E1E;
		}
		.goods-type-active{
			background-color: #fff;
		}
		.type-title{
			height: 66rpx;
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #1E1E1E;
		}
		.goods-list{
			display: inline-flex;
			align-items: center;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 1rpx 4rpx 1rpx rgba(0,0,0,0.1);
			border-radius: 8rpx;
			margin-bottom: 10rpx;
			padding: 10rpx;
		}
		
		.goods-info{
			padding-left: 20rpx;
			flex-grow: 1;
			width: 100rpx;
		}
		.goods-img-box{
			width: 180rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 3rpx;
			border: 1rpx solid rgba(16,53,151,0.28);
			flex-shrink: 0;
		}
		.goods-img{
			width: 100%;
			height: 100%;
		}
		
		.goods-title{
			font-weight: 500;
			font-size: 26rpx;
			color: #1E1E1E;
		}
		.goods-price{
			font-weight: 500;
			font-size: 24rpx;
			color: #FB1E16;
			margin-top: 5rpx;
		}
		.goods-sell{
			font-size: 24rpx;
			color: #1E1E1E;
			margin-top: 5rpx;
		}
		.goods-buy{
			display: flex;
			align-items: center;
			margin-top: 5rpx;
			justify-content: flex-end;
			.iconfont{
				font-size: 24rpx;
				font-weight: bold;
				color: #A1A1A1;
			}
		}
		.buy-number{
			width: 50rpx;
			font-size: 28rpx;
			color: #1E1E1E;
			text-align: center;
			border: solid 1px rgba(16,53,151,0.2);
			margin: 0 15rpx;
		}
		
		
		.bottom-box{
			position: fixed;
			height: 105rpx;
			width: 100%;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow: 0rpx -2rpx 3rpx 0rpx rgba(0,0,0,0.08);
			display: flex;
			align-items: center;
			padding:0 20rpx;
			.iconfont{
				padding-right: 20rpx;
				font-size: 50rpx;
				font-weight: bold;
				color: #2F65F3;
			}
		}
		.play-info{
			flex-grow: 1;
		}
		.play-tips{
			font-size: 24rpx;
			color: #4E4E4E;
		}
		.play-num{
			font-weight: 500;
			font-size: 32rpx;
			color: #FB1E16;
		}
		.play-count{
			font-size: 24rpx;
			color: #4E4E4E;
		}
		.bottom-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #2F65F3;
			
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			height: 70rpx;
			border-radius: 8rpx;
			width: 180rpx;
		}
	}
</style>